<template>
  <div class="common-layout">
    <el-container>
      <el-aside width= "200px" height= "1000px">
        <br><br><br>
        <div class="hezi"><img src="./assets/tt.png" alt="" class="tupian"></div><br><br>
        <br><br><br>
        <el-icon><odometer/></el-icon>
        <router-link to= "/ttt1" class="zhangfenglin">仪表盘</router-link>
  <div class= "demo-collapse">
    <el-collapse accordion class="b">
    <el-collapse-item name= "1" class="a">
    <template #title>
      <el-icon> <grid/></el-icon>
    常用设置
    <el-icon class="header-icon">
      <info-filled/>
    </el-icon>
    </template>
    <div>                                                                              
      <router-link to= "/ttt1" class= "zhangfenglin"> 教师管理</router-link>
    </div><br>
    <div>                                                                              
      <router-link to= "/ttt2" class= "zhangfenglin"> 学生管理</router-link>
    </div>
    <div><br>                                                                              
      <router-link to= "/ttt3" class= "zhangfenglin"> 公告管理</router-link>
    </div>
    <div><br>                                                                              
      <router-link to= "/ttt4" class= "zhangfenglin"> 系统配置</router-link>
    </div><br>
    <div>                                                                              
      <router-link to= "/ttt5" class= "zhangfenglin"> 判断服务器</router-link>
    </div>
    </el-collapse-item>
    <el-collapse-item name= "2">
      <template #title>
        <el-cion><aim/></el-cion>
        问题<el-cion class="header-icon">
          <info-filled/>
        </el-cion>
        </template>
        <div>
          <router-link to= "/ttt6" class= "zhangfenglin">问题列表</router-link>
        </div><br>
         <div>
          <router-link to= "/ttt7" class= "zhangfenglin">增加题目</router-link>
        </div>
         <div>
           <br>
          <router-link to= "/ttt8" class= "zhangfenglin">导入导出题目</router-link>
        </div>
    </el-collapse-item>
    <el-collapse-item name= "3">
      <template #title>
        <el-icon><trophy /></el-icon>
        比赛&练习<el-icon class="header-icon">
          <inf0-filled/>
        </el-icon>
      </template>
      <div>
        <router-link to= "/ttt9" class="zhangfenglin">比赛列表</router-link>
      </div>
      <div><br>
        <router-link to= "/ttt10" class="zhangfenglin">创建比赛</router-link>
      </div>
    </el-collapse-item>

    <el-collapse-item name= "4">
      <template #title>
        <el-icon><collection/></el-icon>
        课程<el-icon><info-filled/></el-icon>
        </template>
        <div>
        <router-link to= "/ttt11" class="zhangfenglin">课程列表</router-link>
      </div><br>
      <div>
        <router-link to= "/ttt12" class="zhangfenglin">创建课程</router-link>
      </div>
    </el-collapse-item>

    </el-collapse>
  </div>
      </el-aside>
      <el-container>
        <el-header class="color1">

          <el-dropdown class="xiaotubiao2">
            <span class="el-dropdown-link">
              username
              <el-icon class="el-cion--right">
                <arrow-down/>
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
              </template>
              </el-dropdown>
              <el-icon class="xiaotubiao1"><share/></el-icon>
              <el-icon class="xiaotubiao"><search/></el-icon>
        </el-header>
        <el-main class= "color2">

          <el-crad class= "bos-card">
            <template #header>
              <div class="card-header">
              <span>标题</span>
              </div>
              </template>
              <router-view class="zhangfenglin"></router-view>
              </el-crad>

        </el-main>
        <el-footer class="color3">footer</el-footer>
        </el-container>
        </el-container>
  </div>
</template>
<script>
import {Trophy,Collection,Search,Share,ArrowDown, Odometer,Grid,Aim} from '@element-plus/icons-vue'
export default{
  name:'App',
  components:{
   Trophy,
   Collection,
   Search,
   Share,
   ArrowDown,
  Odometer,
  Grid,
  Aim
  }

}
</script>
  <style scoped>
  .box-card{
    height: 400px;
  }
  .zhangfenglin{
     text-align: center;
    text-decoration: none;
  }
  .xiaotubiao2{
    float: right;
  }
   .xiaotubiao1{
    float: right;
  }
   .xiaotubiao{
    float: right;
  }
  .demo-collapse{
    height: 500px;
  }
  .tupian{
    width: 61px;
    height: 61px;

  }
  .hezi{
    align-items: center;
    display:flex;
    justify-content: center;
  }
  .yanse{
    background-color: #F2F6FC;
  }
   .color1{
    background-color: #edecec;
  }
   .color2{
    background-color: #e4e7ed;
  }
   .color3{
    background-color: #e4e7ed;
  }
  
  </style>